<!--
* @author wn
* @date 2022/11/14 15:14:05
* @description: 头部组件
!-->
<template>
	<div class="app-header">
		<div class="left" @click="handleClick">
			<el-icon color="#fff" :size="30" v-if="!isCollapse">
				<CaretRight />
			</el-icon>
			<el-icon color="#fff" :size="30" v-else><CaretLeft /></el-icon>
		</div>
	</div>
</template>
<script setup>
import { CaretRight, CaretLeft } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useStore } from 'vuex'

// vuex 修改 是否折叠
const store = useStore()
const isCollapse = computed(() => store.state.common.isCollapse)
const handleClick = () => {
	store.commit('common/setCollapse')
}
</script>
<style scoped lang="scss">
.app-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	.left {
		height: 30px;
	}
}
</style>
